<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>
        表单校验
    </title>
    <link rel="stylesheet" href="src/style.css"></link>

</head>
<body>
    <div class="login-form-wrap">
        <h1>黑马程序员</h1>
         <form class="login-form" action="#" id="reset" method="get" autocomplete="off">
            <label>
                <input type="text"  id="username" name="username" placeholder="username..." autofocus="autofocus" value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
                <input type="submit" value="注册">
         </form>
    </div>
<script>

    document.getElementById("reset").onsubmit = function () {
        return chc() && fon();
    }
// window.document.getElementsByTagName("body").onload = function (){
//         window.document.getElementById("username").focus();
// }
        document.getElementById("username").onblur=chc;
        document.getElementById("password").onblur=fon;

        function chc() {
            let username = document.getElementById("username").value;
            let reg1 = /^[a-zA-Z]{4,16}$/;
            if (!reg1.test(username)) {
                document.getElementById("username").setAttribute("style", "border:1px solid red;");
                return false;
            } else {
                document.getElementById("username").removeAttribute("style");
            }
            return true;
        }
            function fon() {
                let password = document.getElementById("password").value;

                let reg1 = /^[\d]{6}$/;
                if (!reg1.test(password)) {
                     document.getElementById("password").setAttribute("style", "border:1px solid red;");
                    return false;
                } else {
                    document.getElementById("password").removeAttribute("style");
                }
                return true;
            }




</script>

</body>